<template>
  <div>
    <div v-for="(c, i) in config" :key="i" class="component">
      <div class="key">{{ c.optionName }}</div>
      <div class="value">
        <LinkButton
          v-for="(v, j) in c.options"
          :key="j"
          :btnText="v.name"
          :class="{ bigTxt: true, checked: v.status }"
          :handler="handleClick"
          :optionName="c.optionName"
        ></LinkButton>
      </div>

      <!-- <button v-for="(v, i) in value" :key="i">{{ v }}</button> -->
    </div>
  </div>
</template>

<script>
import { settingsStore } from '@/store.js'
import LinkButton from '@/components/LinkButton.vue'
export default {
  components: {
    LinkButton
  },
  data () {
    return {
      config: [],
      key: '主题',
      value: [{ option: '亮色', status: true }, { option: '暗色', status: false }]
    }
  },
  methods: {
    handleClick (args) {
      console.log(args)
      this.config.filter(i => {
        if (i.optionName === args[0]) {
          i.options.filter(j => { j.status = j.name === args[1] })
        }
      })
      settingsStore.update(this.config)
    }
  },
  created () {
    this.config = settingsStore.state.filter((i) => i)
    // console.log(this.config)
  }
}
</script>

<style lang="scss" scoped>
.component {
  display: flex;
  font-size: 24px;
  // justify-content:;
}

.value {
  // font-size: 24px;
  margin-left: auto;
}
</style>
